<template>
  <div id="selwrap">
    <el-row style="padding: 10px 0">
      <el-col :span=5>
        <h3>疾病领域</h3>
      </el-col>
      <el-col :span="10">
        <el-select v-model="type" placeholder="请选择疾病领域" style="width: 190px; height:28px;" @change="getSourceByTA">
          <el-option v-for="item in TA" :label="item.label" :value="item.value" :key="item.value"/>
        </el-select>
      </el-col>
    </el-row>

    <el-row style="padding: 10px 0">
      <el-col :span=5>
        <h3>时间区间</h3>
      </el-col>
      <el-col :span="10">
        <DatePicker type="daterange" placement="bottom-end" placeholder="时间段" style="width: 190px; height:28px; font-size:12px; text-align: center;"></DatePicker>
      </el-col>
    </el-row>

    <el-row style="padding: 10px 0">
      <el-col :span=5>
        <h3>源列表</h3>
      </el-col>
      <el-col :span="10">
        <el-tree :data="sourcelist" show-checkbox node-key="id" :default-expanded-keys="[3, 8,11]"></el-tree>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import selWrap from '@/comcom/selwrap';
  import sourceTree from './SourceTree'

  export default {
    components: {
      selWrap, sourceTree
    },
    data() {
      return {
        TA: [
          {label: '血友病', value: 'hemophilia'},
          {label: '肺癌', value: 'lungCancer'},
          {label: '移植', value: 'transplant'}
        ],
        sourcelist: []
      }
    },
    methods: {

      getSourceByTA: function (ta) {
        console.info(ta.value)
        this.sourcelist =[{
          "id": 1,
          "label": "患者论坛",
          "children": [{
            "id": 2,
            "label": "肺癌帮"
          }, {
            "id": 3,
            "label": "抗癌健康网"
          }, {
            "id": 4,
            "label": "奇迹网"
          }, {
            "id": 5,
            "label": "中华康网"
          }, {
            "id": 6,
            "label": "肿瘤吧"
          }, {
            "id": 7,
            "label": "绝症吧"
          }, {
            "id": 8,
            "label": "进口药吧"
          }, {
            "id": 9,
            "label": "病友吧"
          }, {
            "id": 10,
            "label": "靶向药吧"
          }, {
            "id": 11,
            "label": "化疗吧"
          }, {
            "id": 12,
            "label": "飞华疾病"
          }]
        }, {
          "id": 13,
          "label": "在线问诊",
          "children": [{
            "id": 14,
            "label": "39问医生"
          }, {
            "id": 15,
            "label": "微医"
          }, {
            "id": 16,
            "label": "好大夫在线"
          }, {
            "id": 17,
            "label": "快速问医生"
          }, {
            "id": 18,
            "label": "丁香园论坛"
          }, {
            "id": 19,
            "label": "丁香搜索"
          }, {
            "id": 20,
            "label": "有来医生"
          }, {
            "id": 21,
            "label": "丁香医生"
          }, {
            "id": 22,
            "label": "春雨医生"
          }]
        }, {
          "id": 23,
          "label": "社交媒体",
          "children": [{
            "id": 24,
            "label": "新浪微博"
          }, {
            "id": 25,
            "label": "宣武医院肺癌患者微信群 "
          }, {
            "id": 26,
            "label": "北京肿瘤医院肺癌关爱群"
          }, {
            "id": 27,
            "label": "QQ群"
          }]
        }]
/*        this.$axios({
          method: "post",
          url: "http://192.168.1.67:8081/getSourceList",
          data: {"ta": ta}
        }).then((res) => {
          console.log(res.data.sourcelist);
          this.sourcelist = res.data.sourcelist;
        })*/
      }
    }
  }
</script>

<style scoped>
  @import '../../../../assets/index.css';

  .Sidebar > h3 {
    color: #fff;
    font-size: 16px;
  }

  .filter-icon > input {
    margin-bottom: 12px;
    width: 90%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 0;
    border-radius: 4px;
    background-color: rgba(246, 242, 226, 0.4);
    font-size: 16px;
    color: #fff;
  }

  .filter-icon > input::-webkit-input-placeholder { /* WebKit browsers */
    color: #ababab;
  }

  .filter-icon > input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #ababab;
  }

  .filter-icon > input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #ababab;
  }

  .filter-icon > input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #ababab;
  }

  .el-tree {
    color: black;
    background: none;
  }

  .el-tree__empty-text {
    color: black;
  }

  .el-intput {

  }

</style>
<style>
  .el-input__inner{
    height: 32px;
    font-size: 12px;
    text-align: center;
  }
  .ivu-input{
    font-size: 12px;
    text-align: center;
  }
</style>


